<template>
  <div class="van-overflow-hidden">
    <!-- 地址编辑 -->
    <div v-if="isActive" data-v-3f0ffdb4="">
      <van-address-edit
        :address-info="change"
        :area-list="areaList"
        show-postal
        show-delete
        show-set-default
        show-search-result
        :search-result="searchResult"
        @save="onsave"
        @delete="onDelete"
      />

      <!-- 选择地址 -->
      <div class="van-overlay" v-if="isOk" style="z-index: 2001"></div>
      <div class="bottom" v-if="isOk" style="height: 40%; z-index: 2002">
        <van-area
          title="标题"
          :area-list="areaList"
          value="110101"
          @cancel="handledelAds"
          @confirm="handleAddAds"
          @change="handleChange"
        />
      </div>
      <!--请选择街道-->
    </div>
    <!-- 地址列表 -->
    <div v-if="isList">
      <van-address-list
        v-model="chosenAddressId"
        :list="list"
        default-tag-text="默认"
        @add="onAdd"
        @edit="onEdit"
        item-bottom="2222"
        @click-item="checkAddress"
        @select="changeAddress"
      />
    </div>
    <div
      v-if="isShow"
      @click="handleAddress(-1)"
      data-v-96a79f7e=""
      class="van-address-list__bottom"
    >
      <button
        data-v-96a79f7e=""
        class="van-button van-button--danger van-button--normal van-button--block van-button--round van-address-list__add"
      >
        <div data-v-96a79f7e="" class="van-button__content">
          <span data-v-96a79f7e="" class="van-button__text">新增地址</span>
        </div>
      </button>
    </div>
    <div v-if="isMain">
      <div class="tops">
        <router-link class="back" to="/cart">
          <i class="iconfont">&#xe6b0;</i>
        </router-link>
        <p class="title">商品订单</p>
      </div>
      <div class="main">
        <van-notice-bar
          left-icon="volume-o"
          text="菜坝网温馨提示：尊敬的顾客您好，由于天气气温、产品来源及商品属性等原因，部分生鲜果蔬、肉蛋禽类商品容易发生变质，请您在收到取货通知后，当天内及时取货。如因您没有及时取货而造成货物品质受到影响，一切责任后果自负。谢谢您的配合和理解！"
        />
        <div class="address">
          <a v-if="isCheck"
             v-for="(item,index) in checkList" :key="index">
            <div class="name">
              <div class="nameleft">{{item.name}}</div>
              <div class="namenuber">{{item.tel}}</div>
            </div>
            <div class="res" @click="handleAddadrs">
              <div class="res-tit">收货地址:{{item.address}}</div>
            </div>

            <div class="rig">
              <i class="van-icon van-icon-arrow"><!----></i>
            </div>
            </a
          >
          <a v-if="!isCheck"
            >
            <div class="name" >
              <div class="nameleft"></div>
              <div class="namenuber"></div>
            </div>
            <div class="res"  @click="handleAddadrs">
              <div class="res-tit">收货地址:</div>
              <div class="res-title">请选择地址</div>
            </div>

            <div class="rig">
              <i class="van-icon van-icon-arrow"><!----></i>
            </div></a
          >
        </div>
        <div class="business" v-for="(itm, idx) in filterList" :key="idx">
          <div class="shop">
            <i class="iconfont home">&#xe75c;</i>
            <a data-v-2a6ae55b="">{{ itm.storeName }}></a>
          </div>
          <div class="shop-list">
            <div class="van-checkbox">
              <span class="label">
                <div class="content">
                  <div class="content-left">
                    <img :src="imgs + itm.iconImg" alt="" />
                  </div>
                  <div class="content-right">
                    <div data-v-2a6ae55b="" class="title">
                      {{ itm.name }}
                    </div>
                    <div data-v-2a6ae55b="" class="kg">
                      <span data-v-2a6ae55b="">{{ itm.nowPrice }}</span>
                    </div>
                    <div data-v-2a6ae55b="" class="pro">
                      ¥<span data-v-2a6ae55b="">{{
                        itm.nowPrice * itm.num
                      }}</span>
                    </div>
                    <div class="nums">
                      <button
                        type="button"
                        class="van-stepper__minus van-stepper__minus--disabled de disabled"
                        style="width: 15px; height: 15px"
                      ></button>

                      <input type="text" class="input" :value="itm.num" />
                      <button
                        type="button"
                        class="van-stepper__plus add"
                        style="width: 15px; height: 15px"
                      ></button>
                    </div>
                  </div>
                </div>
                <div class="integral">
                  <p data-v-6012897a="">
                    小计 :
                    <span data-v-6012897a="">￥{{ itm.nowPrice }}</span>
                  </p>
                </div>
              </span>
            </div>
          </div>
        </div>
        <!-- 优惠券单元格 -->
        <van-coupon-cell
          :coupons="coupons"
          :chosen-coupon="chosenCoupon"
          @click="showList = true"
        />
        <!-- 优惠券列表 -->
        <van-popup
          v-model="showList"
          round
          position="bottom"
          style="height: 90%; padding-top: 4px"
        >
          <van-coupon-list
            :coupons="coupons"
            :chosen-coupon="chosenCoupon"
            :disabled-coupons="disabledCoupons"
            @change="onChange"
            @exchange="onExchange"
          />
        </van-popup>
        <!-- 优惠券单元格 -->
        <van-coupon-cell
          title="现金券"
          :coupons="coupons"
          :chosen-coupon="chosenCoupon"
          @click="showList = true"
        />
        <!-- 优惠券列表 -->
        <van-popup
          v-model="showList"
          round
          position="bottom"
          style="height: 90%; padding-top: 4px"
        >
          <van-coupon-list
            :coupons="coupons"
            :chosen-coupon="chosenCoupon"
            :disabled-coupons="disabledCoupons"
            @change="onChange"
            @exchange="onExchange"
            input-placeholder="请输入现金券码"
            close-button-text="不使用现金券"
          />
        </van-popup>
        <div data-v-6012897a="" class="remark">
          <div data-v-6012897a="" class="van-cell van-field">
            <div class="van-cell__title van-field__label">
              <span>备注 :</span>
            </div>
            <div class="van-cell__value van-field__value">
              <div class="van-field__body">
                <textarea
                  rows="1"
                  placeholder="填写你想对我说的..."
                  class="van-field__control"
                  style="height: 24px"
                ></textarea>
              </div>
            </div>
          </div>
          <div data-v-6012897a="" class="distribution">
            <div data-v-6012897a="" class="bution">
              <span data-v-6012897a="">配送方式</span
              ><span data-v-6012897a=""
                ><i data-v-6012897a="" class="van-icon van-icon-arrow"
                  ><!----></i
                ></span
              ><span data-v-6012897a="">快递 免邮</span>
            </div>
          </div>
          <div data-v-6012897a="" class="van-submit-bar">
            <div data-v-6012897a="" class="van-submit-bar__tip">
              <span data-v-6012897a="" class="van-submit-bar__tip-text"
                >支付可能反应较慢，请耐心等待</span
              >
            </div>
            <div data-v-6012897a="" class="van-submit-bar__bar">
              <div
                data-v-6012897a=""
                class="van-submit-bar__text"
                style="text-align: left"
              >
                <span data-v-6012897a="">合计：</span
                ><span data-v-6012897a="" class="van-submit-bar__price"
                  >¥<span
                    data-v-6012897a=""
                    class="van-submit-bar__price van-submit-bar__price--integer"
                    >{{ parseInt(payAllPrice) }}</span
                  >.00</span
                >
              </div>
              <button
                data-v-6012897a=""
                class="van-button van-button--danger van-button--normal van-button--round van-submit-bar__button van-submit-bar__button--danger"
              >
                <div data-v-6012897a="" class="van-button__content">
                  <span data-v-6012897a="" class="van-button__text"
                    >立即支付</span
                  >
                </div>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { areaList } from "@vant/area-data";
import { mapState } from "vuex";

const coupon = {
  available: 1,
  condition: "满40元减5元",
  reason: "",
  value: 150,
  name: "优惠券名称",
  startAt: 1489104000,
  endAt: 1514592000,
  valueDesc: "1.5",
  unitDesc: "元",
};
const coupon1 = {
  available: 1,
  condition: "满40元减5元",
  reason: "",
  value: 150,
  name: "优惠券名称",
  startAt: 1489104000,
  endAt: 1514592000,
  valueDesc: "1.5",
  unitDesc: "元",
};
export default {
  data() {
    return {
      imgs: "https://caiba-produce.oss-cn-beijing.aliyuncs.com//",
      chosenCoupon: -1,
      coupons: [coupon],
      disabledCoupons: [coupon],
      showList: false,
      payAllPrice: 0,
      payAllCount: 0,
      isShow: false, //控制新增地址
      isActive: false, //控制编辑地址
      isMain: true,
      areaList,
      isOk: false, //控制选择地址
      isDefault: false,
      carmodel: ["选择省/市/区"],
      searchResult: [],
      chosenAddressId: "1",
      isList: false, //控制地址列表
      checkList: [],
      change: {},
      editnum: -1,
      isCheck:false,
    };
  },
  methods: {
    onAdd() {
      this.isShow = false;
      this.isActive = true;
      this.isMain = false;
      this.isList = false;
      this.editnum = 1;
    },
    onEdit(item, index) {
      this.isActive = true;
      this.isShow = false;
      this.isList = false;
      this.isMain=false;
      this.change = {};
      this.change = item;
      this.editnum = index;
    },
    onlist() {
      this.isShow = false;
      this.isActive = true;
      this.isMain = false;
    },
    onDelete(content) {
      this.isActive = false;
      this.isList = true;
      this.$store.commit("address/delAddressMut", content);
    },
    onChangeDetail(val) {
      if (val) {
        this.searchResult = [
          {
            name: "黄龙万科中心",
            address: "杭州市西湖区",
          },
        ];
      } else {
        this.searchResult = [];
      }
    },
    changeAddress(item, index) {
      console.log(item, index);
      this.isList = false;
      this.isMain = true;
      this.isCheck=true;
      this.checkList=[];
      this.checkList.push(item);
      console.log(this.checkList);
    },
    onChange(index) {
      this.showList = false;
      this.chosenCoupon = index;
    },
    onExchange(code) {
      this.coupons.push(coupon);
    },
    handleAddress(i) {
      this.isShow = false;
      this.isActive = true;
      this.isMain = false;
      this.editnum = i;
    },
    handleAddadrs() {
      if (this.list.length > 0) {
        this.isList = true;
        this.isActive = false;
        this.isMain = false;
      } else {
        this.isShow = true;
        this.isActive = false;
        this.isMain = false;
      }
    },
    handledelAds() {
      this.isOk = false;
    },
    handleAddAds() {
      this.isOk = false;
    },
    handleChange(picker, value, index) {
      let areaName = "";
      this.carmodel = [];
      for (var i = 0; i < picker.length; i++) {
        areaName = areaName + picker[i].name + " ";
      }

      for (let i = 0; i < 3; i++) {
        this.carmodel.push(value[i].name);
      }

      this.carmodel = this.carmodel.join("/");
    },
    onsave(content) {
      this.isActive = false;
      this.isList = true;
      let { editnum } = this;
      if (!content.addressList) {
        this.$set(
          content,
          "address",
          content.province + "/" + content.city + "/" + content.county
        );
      }

      this.$store.commit("address/addAddressMut", { content, editnum });
    },
  },
  computed: {
    filterList() {
      return this.$store.getters["good/filterList"];
    },
    ...mapState({
      list: (state) => state.address.addressList,
    }),
  },
  created() {
    this.filterList.forEach(({ num, nowPrice }) => {
      this.payAllCount += num;
      this.payAllPrice += num * nowPrice;
    });
  },
};
</script>

<style lang="less" scoped>
.tops {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  width: 100%;
  height: 0.5rem;
  .back {
    position: absolute;
    left: 0.1rem;
    top: 0.16rem;
    z-index: 100;
    font-size: 0.2rem;
    color: #fff;
    i {
      font-size: 20px;
      display: inline-block;
    }
  }
  .title {
    overflow: hidden;
    height: 100%;
    line-height: 0.6rem;
    background: url(../../assets/img/i-bg1.jpg) 50%;
    background-size: cover;
    font-size: 0.15rem;
    color: #fff;
    text-align: center;
    position: relative;
  }
}
.main {
  height: 100vh;
  overflow: auto;
  padding-top: 0.5rem;
  padding-bottom: 0.7rem;
  background: #f5f5f5;
  .address {
    background: #fff url(../../assets/img/adress.png) bottom no-repeat;
    margin-bottom: 0.1rem;
    padding: 0.15rem 0.15rem 0.3rem;
    background-size: 100%;
    a {
      display: block;
      position: relative;
      text-decoration: none;
      color: #333;
      .name {
        width: 90%;
        overflow: hidden;
        font-size: 0.15rem;
        .nameleft {
          float: left;
          font-weight: 600;
        }
        .namenuber {
          float: right;
        }
      }
      .res {
        margin: 0.05rem 0;
        display: flex;
        font-size: 0.12rem;
        color: #666;
        text-align: left;
        .res-tit {
          width: 20%;
        }
        .res-title {
          width: 74%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
      .rig {
        color: #999;
        position: absolute;
        font-size: 0.2rem;
        right: 0;
        top: 0.1rem;
        i {
          display: inline-block;
        }
      }
    }
  }
  .business {
    padding: 0.1rem;
    background: #fff;
    border-radius: 0.2rem;
    margin-bottom: 0.2rem;
    .shop {
      width: 100%;
      margin-bottom: 0.1rem;
      display: flex;
      i {
        width: 1.25em;
        height: 1.25em;
        font-size: 1.2em;
        line-height: 1.25;
        text-align: center;
      }
      .checkof {
        color: #ccc;
      }
      .checked {
        color: #df2321;
      }
      .home {
        position: relative;
        display: inline-block;
        margin: 0 0.02rem;
      }
    }
    .shop-list {
      .van-checkbox {
        display: flex;
        -webkit-box-align: center;
        align-items: center;
        overflow: hidden;
        cursor: pointer;
        user-select: none;

        .label {
          margin-left: 8px;
          color: #323233;
          line-height: 20px;

          .content {
            display: flex;
            width: 100%;
            padding: 0.1rem 0;
            align-items: center;
            i {
              width: 0.14rem;
              height: 0.17rem;
              font-size: 1em;
              line-height: 1.25;
              text-align: center;
              margin-right: 0.1rem;
            }
            .checkof {
              color: #ccc;
              font-size: 1em;
            }
            .checked {
              color: #df2321;
            }
            .content-left {
              flex: 1;
              max-height: 1rem;
              img {
                display: block;
                width: 0.9rem;
                height: 0.9rem;
                border-radius: 0.1rem;
              }
            }
            .content-right {
              flex: 2;
              margin-left: 0.14rem;
              position: relative;
              .title {
                width: 2.2rem;
                height: 0.3rem;
                font-weight: 700;
                font-size: 0.15rem;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
              .kg {
                height: 0.4rem;
                span {
                  display: inline-block;
                  background: #eee;
                  padding: 2px 0.05rem;
                  border-radius: 0.05rem;
                  font-size: 0.12rem;
                }
              }
              .pro {
                font-size: 0.12rem;
                color: #df2321;
                span {
                  font-size: 0.14rem;
                }
              }
              .nums {
                border-radius: 0.04rem;
                position: absolute;
                right: 0.2rem;
                bottom: 0;
                display: flex;
                font-size: 0;
                user-select: none;
                .de {
                  width: 0.15rem;
                  line-height: 0.15rem;
                  color: #ee0a24;
                  background-color: #fff;
                  border: 1px solid #ee0a24;
                  border-radius: 100%;
                  vertical-align: middle;
                }
                .disabled {
                  opacity: 0.3;
                }
                .input {
                  width: 0.24rem;
                  height: 0.15rem;
                  resize: none;
                  outline: 0;
                  -webkit-appearance: none;
                  white-space: pre-wrap;
                  word-wrap: break-word;
                  background: #fff;
                  outline: none;
                  box-sizing: border-box;
                  margin: 0 0.02rem;
                  padding: 0;
                  color: #323233;
                  font-size: 0.14rem;
                  line-height: normal;
                  text-align: center;
                  vertical-align: middle;
                  border: 0;
                  border-width: 0.01rem 0;
                  border-radius: 0;
                }
                .add {
                  width: 0.15rem;
                  height: 0.15rem;
                  color: #fff;
                  background-color: #ee0a24;
                  border-radius: 100%;
                  position: relative;
                  box-sizing: border-box;
                  margin: 0;
                  padding: 0;
                  vertical-align: middle;
                  border: 0;
                  cursor: pointer;
                  opacity: 0.3;
                }
              }
            }
          }
          .integral {
            height: 0.3rem;
            position: relative;
            padding: 0 0.1rem;
            p {
              position: absolute;
              top: 0.04rem;
              right: 0.12rem;
              font-size: 0.14rem;
              span {
                color: #df2321;
              }
            }
          }
        }
      }
    }
  }
}
.distribution {
  background-color: #fff;
  padding: 0.1rem 0.15rem;
  div {
    height: 0.4rem;
    position: relative;
    span:first-child {
      float: left;
      line-height: 0.4rem;
    }
    span:nth-child(2) {
      float: right;
      line-height: 0.4rem;
    }
    span[data-v-6012897a]:nth-child(3) {
      float: right;
      color: #969799;
      line-height: 0.4rem;
    }
  }
}
.content {
  margin-top: 0 !important;
  background: #fff !important;
}
.van-overflow-hidden {
  overflow: hidden !important;
}
.bottom {
  bottom: 0;
  left: 0;
  width: 100%;
  position: fixed;
  max-height: 100%;
  overflow-y: auto;
  background-color: #fff;
  transition: transform 0.3s;
}
.center {
  margin-top: 0.1rem;
  text-align: center;
  .btn {
    margin-top: 0.2rem;
    width: 90%;
    border-radius: 200px;
  }
}
.main .address a .res .res-tit{
    width: 100% !important;
}
</style>